<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <style>
        input {
            width: 300px;
            height: 36px;
            padding-left: 5px;
            color: #ccc;
        }
        label {
            position: absolute;
            top: 82px;
            left: 56px;
            font-size: 12px;
            color: #ccc;
            cursor: text;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
	</head>
	<body>
		   京东:<input id="inp1" type="text" value="我是京东"/><br><br>
                        淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text"/><br><br>
	</body>
	<script>
		
		 //需求：京东的获取焦点。
        //思路：京东的input按钮获取了插入条光标立刻删除内容。失去插入条光标显示文字。
        var inp1=document.getElementById("inp1");
        //获取焦点事件
        	inp1.onfocus=function(){
        		if(this.value==="我是京东"){
        			console.log(this.value)
	        		this.value=""
	        		this.style.color="#000"
        		}
        	}
        	//失去焦点事件
        	inp1.onblur=function(){
        		if(this.value===""){
        			this.value="我是京东"
        			this.style.color="#ccc"
        		}
        		
        	}
             //需求：淘宝的获取焦点。
        //思路：在input中输入文字，label标签隐藏，里面的文字变成空字符串，label显示。
              var inp2=document.getElementById("inp2");
             var lab= document.getElementsByTagName("label")[0];
             //输入事件，文字的输入和删除都会触发这个事件
            	inp2.oninput=function(){
            	console.log(this.value)
            	if(this.value===''){
            		lab.className='show'
            		this.style.color="#ccc"
            	}else{
            		lab.className='hide'
            		this.style.color="#000"
            	}
            	}
	</script>
</html>
